<template>
  <div class="newTeachingProgram">
    <el-breadcrumb separator="/" class="breadcrumb-bottom">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>课程管理</el-breadcrumb-item>
      <el-breadcrumb-item>新增课程教学大纲</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form ref="form" :model="form" label-width="100px" class="content">
      <el-form-item label="课程名称">
        <el-input v-model="form.courseName" placeholder="请输入课程名称"></el-input>
      </el-form-item>
      <el-form-item label="教学大纲名称">
        <el-input v-model="form.teachingProgram" placeholder="请输入教学大纲名称"></el-input>
      </el-form-item>
      <el-form-item label="修订时间">
        <el-date-picker type="date" placeholder="选择日期" v-model="form.createTime" style="width: 100%;"></el-date-picker>
      </el-form-item>
      <el-form-item label="修订人">
        <el-input v-model="form.revised" placeholder="请输入修订人"></el-input>
      </el-form-item>
      <el-form-item label="课程教学大纲">
        <!--<el-input v-model="form.teachingProgramFile"></el-input>-->
        <el-upload
          class="upload-demo"
          ref="upload"
          action="https://jsonplaceholder.typicode.com/posts/"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" :rows="6" v-model="form.remark"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'newTeachingProgram',
    data () {
      return {
        form: {
          courseName: '',
          teachingProgram: '',
          createTime: '',
          revised: '',
          teachingProgramFile: '',
          remark: ''
        },
        url:'/'
      }
    },
    methods: {
      onSubmit() {
        var formData = JSON.stringify(this.form); //表单数据 {emulateJSON:true}
        this.$http.post(this.url,formData).then(function(res){
          if(res.json().state=="success"){
            setTimeout(function () {
              console.log("success");
            }, 2000);
          }

        }).catch(function(){
          console.log("服务器异常！");
        });
      },
      submitUpload() {
        this.$refs.upload.submit();
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>
